import { Button, HStack, List, ListItem } from "@chakra-ui/react";
import { FaChartLine, FaChartPie, FaChartBar } from "react-icons/fa";
import { ReactNode } from "react";
import { data } from "./data";
import { MdBubbleChart } from "react-icons/md";
import { GiHistogram } from "react-icons/gi";

export interface Feature {
  id: number;
  name: string;
  type: string;
}

interface Props {
  onSelectFeature: (feature: Feature) => void;
  selected: Feature | null;
}

const FeatureList = ({ onSelectFeature, selected }: Props) => {
  function getIcon(feature: Feature): ReactNode {
    switch (feature.name) {
      case "Line":
        return <FaChartLine />;
      case "Scatter":
        return <MdBubbleChart />;
      case "Histogram":
        return <GiHistogram />;
      case "Pie":
        return <FaChartPie />;
    }
  }

  return (
    <List>
      {data.map((feature) => (
        <ListItem key={feature.id} paddingY="5px">
          <HStack>
            {getIcon(feature)}
            <Button
              whiteSpace="normal"
              textAlign="left"
              fontSize="lg"
              variant="link"
              fontWeight={feature.id === selected?.id ? "bold" : "normal"}
              backgroundColor={
                feature.id === selected?.id ? "lightblue" : "normal"
              }
              onClick={() => onSelectFeature(feature)}
            >
              {feature.name}
            </Button>
          </HStack>
        </ListItem>
      ))}
    </List>
  );
};

export default FeatureList;
